<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6的对象简写</title>
</head>
<body>
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="age" placeholder="请输入年龄">
    <button id="btn">登录</button>
    <script>
        btn.onclick = function () {
            // 1. 属性名和变量名相同，可以省略属性名
            let name = document.getElementById('name').value;
            let age = document.getElementById('age').value;
            let obj = { name, age };
            console.log(obj); // { name: '张三', age: 18 }

            // 2. 方法简写
            let obj2 = {
                name,
                age,
                say() {
                    console.log('hello');
                }
            };
            console.log(obj2); // { name: '张三', age: 18, say: [Function: say] }

            // 3. 动态属性名
            let key = 'name';
            let obj3 = {
                [key]: '李四'
            };
            console.log(obj3); // { name: '李四' }

            // 4. 对象解构赋值
            let { name: n, age: a } = obj;
            console.log(n, a); // 张三 18 
        };
    </script>
</body>
</html>